<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>盾泰云平台 - 登录</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../css/bootstrap.min14ed.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
    <link href="../css/login.min.css" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <style type="text/css">
        .btn-success:active:focus{
            background-color: #4684ab;
        }
        #app{height: 100%}
        .login-div a:focus,.login-div a:hover{
            color: #337ab7;
            text-decoration: underline;
        }
        [v-cloak] {
          display: none;
        }
        .getCode,.getCode:focus,.getCode:hover{
            pointer-events: none;
            background-color: #909399;
            border-color: #909399;
            outline:none
        }
    </style>

</head>

<body class="signin">
    <div class="dt-flex dt-flex-column" id="app" v-show="appShow">
        <div class="logo">
            <img src="../img/login/logo.png">
        </div>
        <div class="signinpanel dt-flex__item dt-flex">
            <div class="signin-info dt-flex__item">
                <img src="../img/login/pic.png">
            </div>
            <div class="dt-flex__item animated fadeInDown" v-cloak>
                <div class="login-div dom-login" v-if="switch_dom == 'login'">
                    <h4 class="no-margins">欢迎登录：</h4>
                    <p class="m-t-md">登录到后台</p>
                    <input type="text" class="form-control uname" placeholder="用户名" autofocus v-model="login.userName" />
                    <input type="password" class="form-control pword" placeholder="密码" v-model="login.password" />
                    <div class="vCodeWrap"> 
                        <input type="text" class="form-control vCode m-b" placeholder="验证码" v-model="login.vCode" @keyup.enter="btn_login"  />
                        <img class="vCodeImg" :src="vCodeUrlText" alt="验证码" title="点击刷新验证码" @click="getVcode">
                    </div>
                    <p class="dt-flex">
                        <a href="javascript:;" class="dt-flex__item" @click="switch_dom = 'forget'">忘记密码了？</a>
                        <!-- <a href="javascript:;" class="" @click="btn_register">新用户注册</a> -->
                    </p>
                    <button class="btn btn-success btn-block" @click="btn_login">登录</button>
                </div>
                <div class="login-div dom-register" v-else-if="switch_dom == 'register'">
                    <h4 class="no-margins"><i class="el-icon-back" style="font-size: 20px;cursor: pointer;" @click="btn_back"></i></h4>
                    <input type="text" class="form-control uname" placeholder="用户名" v-model="register.userName" />
                    <input type="password" class="form-control pword m-b" placeholder="密码" v-model="register.password" />
                    <input type="password" class="form-control pword m-b" placeholder="确认密码" v-model="register.passwordRE" />
                    <el-row style="margin-top: -15px;">
                        <el-col :span="18">
                            <input type="text" class="form-control email m-b" placeholder="获取邮箱验证码"  v-model="register.emailCode"/>
                        </el-col>
                        <el-col :span="6">
                            <button class="btn btn-success btn-block" style="border-radius: 0px;" @click="getAccessCode">获取</button>
                        </el-col>
                    </el-row>
                    <p class="dt-flex">
                        <a href="javascript:;" class="dt-flex__item" @click="btn_forget">忘记密码了？</a>
                    </p>
                    <button class="btn btn-success btn-block" @click="btn_register">注册</button>
                </div>
                <div class="login-div dom-forget" v-else="switch_dom == 'forget'">
                    <h4 class="no-margins"><i class="el-icon-back" style="font-size: 20px;cursor: pointer;" @click="btn_back"></i></h4>
                    <input type="text" class="form-control uname" placeholder="用户名" v-model="forget.userName" />
                    <input type="password" class="form-control pword m-b" placeholder="新密码" v-model="forget.password" />
                    <input type="password" class="form-control pword m-b" placeholder="确认新密码" v-model="forget.passwordRE" />
                    <el-row style="margin-top: -15px;">
                        <el-col :span="18">
                            <input type="text" class="form-control email m-b" placeholder="获取邮箱验证码" v-model="forget.emailCode" />
                        </el-col>
                        <el-col :span="6">
                            <button class="btn btn-success btn-block" :class="seconds<60?'getCode':''" style="border-radius: 0px;" @click="getAccessCode">{{secondsText}}</button>
                        </el-col>
                    </el-row>
                    <p class="dt-flex">
                        <!-- <a href="javascript:;" class="dt-flex__item" @click="btn_register">新用户注册</a> -->
                    </p>
                    <button class="btn btn-success btn-block" @click="btn_forget">重置密码</button>
                </div>
            </div>
        </div>
    </div>
    <!-- import Vue before Element -->
    <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
    <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
    <script src="../plugins/ElementUI/vue-resource.min.js"></script>
    <script src="../js/ApiRequest.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                appShow:true,
                login:{
                    userName:'',
                    password:'',
                    vCode:''
                },
                register:{
                    userName:'',
                    password:'',
                    passwordRE:'',
                    emailCode:''
                },
                forget:{
                    userName:'',
                    password:'',
                    passwordRE:'',
                    emailCode:''
                },
                vCodeUrl:"",
                switch_dom:'login',
                seconds:60,
                interval:''
            },
            mounted:function(){
                this.$nextTick(function(){
                    this.getVcode()
                })
            },
            updated:function(){
                this.appShow = true
            },
            methods:{
                btn_login:function(){
                    var data = {
                        userName:this.login.userName,
                        password:this.login.password,
                        code:this.login.vCode
                    }
                    if(data.userName == ''){
                        vm.$message({
                          message: '请输入用户名！！',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }else if(data.password == ''){
                        vm.$message({
                          message: '请输入密码！！',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }
                    else if(data.code == ''){
                        vm.$message({
                          message: '请输入验证码！！',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }else if(!RE.reName(data.userName)){
                        vm.$message({
                          message: '用户名4到16位（字母，数字，下划线）且连续重复不能超过三个',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }
                    this.postApi(data)
                },
                getAccessCode:function(){
                    var data = {}
                    if(this.switch_dom == 'forget'){
                        data.loginName = this.forget.userName;
                    }else{
                        data.loginName = this.register.userName;
                    }
                    if(data.loginName == '') {
                        vm.$message({
                          message: '用户名不能为空！！',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }
                    resourceRequst("/user/getAccessCode",data,function(res){
                        vm.interval = setInterval(function(){
                             vm.tick()
                        }, 1000);
                        vm.$message({
                          message: '验证码发送成功！！',
                          type: 'success',
                          duration:1500
                        });
                    })
                },
                btn_register:function(){
                    this.switch_dom = 'register';
                    var data = {
                        loginName:this.register.userName,
                        newPassword:this.register.password,
                        accessCode:this.registerr.emailCode
                    }
                    // this.postApi(data)
                },
                btn_forget:function(){
                    if(this.forget.userName == '' || 
                        this.forget.password == '' || 
                        this.forget.passwordRE == '' ||
                        this.forget.emailCode == '') {
                        vm.$message({
                          message: '输入框不能为空！！',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }
                    if(this.forget.password !== this.forget.passwordRE){
                        vm.$message({
                          message: '密码输入不一致！！',
                          type: 'warning',
                          duration:1500
                        });
                        return
                    }
                    var data = {
                        loginName:this.forget.userName,
                        newPassword:this.forget.password,
                        accessCode:this.forget.emailCode
                    }
                    resourceRequst("/user/resetPassword",data,function(res){
                        vm.$message({
                          message: '密码重置成功！！',
                          type: 'success',
                          duration:1000,
                          onClose:function(){
                            window.location.reload()
                          }
                        });
                    })
                    // this.postApi(data)
                },
                btn_back:function(){
                    this.switch_dom = 'login';
                },
                tick:function(){
                    if(this.seconds == 0){
                        clearInterval(this.interval);
                        this.seconds = 60
                    }else{
                        this.seconds = this.seconds - 1;
                    }
                },
                postApi:function(data){
                    resourceRequst("/user/userLogin",data,function(res){
                        if(res == "999904"){
                            vm.getVcode()
                            return
                        }
                        storageLocal.set('userInfo',res)
                        vm.$message({
                          message: '登录成功！！',
                          type: 'success',
                          duration:1000,
                          onClose:function(){
                            window.location.replace("/index.html")
                          }
                        });
                    })
                },
                getVcode:function(){
                    resourceRequst("/user/getVCode",{},function(res){
                        vm.vCodeUrl = res.getCode
                        vm.login.vCode = ""
                    })
                }
            },
            computed:{
                secondsText:function(){
                    var test = "";
                    if(this.seconds < 60){
                        test = this.seconds + "s"
                    }else{
                        test = "获取"
                    }
                    return test
                },
                vCodeUrlText:function(){
                    return 'data:image/png;base64,'+this.vCodeUrl
                }
            }
        })
    </script>
</body>

</html>
